<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<qmy-custom-navbar bacColor="0"></qmy-custom-navbar>
		<!-- #endif -->
		<!-- 背景图片 -->
		<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/rzbjle.jpg"
			style="width: 100%;height: 800rpx;z-index: -1;" class="pos-rela">
		</image>
		<view class="pos-fixed bac-col-f w-100 ping-30"
			style="top: 530rpx;border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;min-height: 100vh; z-index: 1;">
			<!-- 身份证照 -->
			<view class="bor-bottom-f3  text-ali-c">
				<view class="flex-dir-row flex-x-bet ali-item-cen">
					<view style="width: 48%;">
						<uni-file-picker ref="files" v-model="idFront" return-type="array" limit="1" mode="grid"
							file-mediatype="image" :sizeType="['compressed']"
							:image-styles="{width: '100%', height: '160rpx',border:false,background:'#f7f7f7',borderRadius:'20rpx',lineHeight:'160rpx'}">
						</uni-file-picker>
					</view>
					<view style="width: 48%;">
						<uni-file-picker ref="files" v-model="idBack" return-type="array" limit="1" mode="grid"
							file-mediatype="image" :sizeType="['compressed']"
							:image-styles="{width: '100%', height: '160rpx',border:false,background:'#f7f7f7',borderRadius:'20rpx',lineHeight:'160rpx'}">
						</uni-file-picker>
					</view>
				</view>
				<view class="fs-28 ping-30-0 fw-600 whi-sp">请上传您的身份证正反面照片</view>
			</view>
			<!-- 真实姓名 -->
			<view class="bor-bottom-f3 ping-30-0">
				<view class="flex-dir-row ali-item-cen">
					<view class="fs-28 fw-600 whi-sp">真实姓名</view>
					<input type="text" class="ml-30 fs-26 w-100" v-model="name" confirm-type="done"
						placeholder-class="input-activity-number" placeholder="请输入您的真实姓名" />
				</view>
			</view>
			<!-- 身份证号 -->
			<view class="bor-bottom-f3 ping-30-0">
				<view class="flex-dir-row ali-item-cen">
					<view class="fs-28 fw-600 whi-sp">身份证号</view>
					<input type="text" class="ml-30 fs-26 w-100" v-model="idNumber" confirm-type="done"
						placeholder-class="input-activity-number" placeholder="请输入您的身份证号" />
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="bor-bottom-f3 ping-30-0">
				<view class="flex-dir-row ali-item-cen">
					<view class="fs-28 fw-600 whi-sp">联系方式</view>
					<input type="text" class="ml-30 fs-26 w-100" v-model="phone" confirm-type="done"
						placeholder-class="input-activity-number" placeholder="请输入您的联系方式" />
				</view>
			</view>
			<!-- 联系地址 -->
			<view class="bor-bottom-f3 ping-30-0">
				<view class="flex-dir-row ali-item-cen">
					<view class="fs-28 fw-600 whi-sp">联系地址</view>
					<input type="text" class="ml-30 fs-26 w-100" v-model="address" confirm-type="done"
						placeholder-class="input-activity-number" placeholder="请输入您的联系地址" />
				</view>
			</view>
			<!-- 申请理由 -->
			<view class="bor-bottom-f3 ping-30-0">
				<view class="flex-dir-row ali-item-sta">
					<view class="fs-28 fw-600 whi-sp">申请理由</view>
					<textarea class="ml-30 fs-26 w-100" style="height: 160rpx;" v-model="reason" placeholder="请输入您的申请理由"
						placeholder-class="textarea-placeholder" />
				</view>
			</view>
		</view>
		<!-- 底部定位发布按钮 -->
		<view class="pos-fixed w-100" style="bottom: 0;z-index: 9999;">
			<!-- 用户服务协议和隐私政策，带单选框 -->
			<view class="w-100 ping-20 bac-col-f flex-dir-row ali-item-cen">
				<view class="fs-26 col-999">
					<checkbox-group @change="agreeChange">
						<label class="checkbox-box">
							<checkbox :checked="agree" activeBackgroundColor="#14cc60" activeBorderColor="#14cc60"
								style="transform: scale(0.7);" />
						</label>
					</checkbox-group>
				</view>
				<view class="fs-26 col-999">
					<text>我已阅读并同意</text>
					<text @click="showSignupPopup(0)" class="col-00ba31 fw-600">《用户服务协议》</text>
					<text>和</text>
					<text @click="showSignupPopup(1)" class="col-00ba31 fw-600">《隐私政策》</text>
				</view>
			</view>
			<!-- 提交申请 -->
			<view @click="submit" class="w-100 fixed-bottom bac-col-00b">
				<view class="w-100 bg-col-00b text-ali-c">
					<view class="fs-30 col-f fw-600">提交申请</view>
				</view>
			</view>
		</view>
		<!-- 用户服务协议和隐私政策弹窗 -->
		<uni-popup ref="privacyPopup" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="slanted-rectangle">
				<scroll-view class="h-60-vh ping-30" scroll-y>
					<mp-html :content="htmlContent[htmlContentIndex].content" />
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idFront: [], //身份证正面照片
				idBack: [], //身份证反面照片
				name: '', //真实姓名
				idNumber: '', //身份证号
				phone: '', //联系电话
				address: '', //联系地址
				reason: '', //申请理由
				htmlContent: [], //用户服务协议和隐私政策
				agree: false, //是否同意
				htmlContentIndex: 0, //用户服务协议和隐私政策
			}
		},
		onLoad() {
			// 获取隐私协议和用户服务协议
			this.getPrivacyPolicy();
		},
		methods: {
			// 获取隐私协议和用户服务协议
			getPrivacyPolicy() {
				this.$Route('get-public-data', true).getRefundPolicy('67dbf114189f86a8ae1309c7').then((res) => {
					this.htmlContent = res.data[0].articles
				}).catch((err) => {
					console.log(err)
				}) 
			},
			agreeChange() {
				this.agree = !this.agree;
			},
			showSignupPopup(index) {
				if (index == 0) {
					this.htmlContentIndex = 0
				} else {
					this.htmlContentIndex = 1
				}
				this.$refs.privacyPopup.open();
			},
			async submit() {
				if (!this.agree) {
					this.$Toast('请先同意用户服务协议和隐私政策');
					return;
				}
				// 防抖
				this.$debounce(async () => {
					// 先校验参数
					if (!this.idFront.length) {
						this.$Toast('请上传身份证正面照片');
						return;
					}
					if (!this.idBack.length) {
						this.$Toast('请上传身份证反面照片');
						return;
					}
					if (!this.name) {
						this.$Toast('请输入真实姓名');
						return;
					}
					if (!this.idNumber) {
						this.$Toast('请输入身份证号');
						return;
					}
					if (!this.phone) {
						this.$Toast('请输入联系电话');
						return;
					}
					if (!this.address) {
						this.$Toast('请输入联系地址');
						return;
					}
					if (!this.reason) {
						this.$Toast('请输入申请理由');
						return;
					}
					// 提交申请
					await this.$Route('add-private-data').addCertificationApplication({
						idFront: this.idFront, //身份证正面照片
						idBack: this.idBack, //身份证反面照片
						name: this.name, //真实姓名
						idNumber: this.idNumber, //身份证号
						phone: this.phone, //联系电话
						address: this.address, //联系地址
						reason: this.reason, //申请理由
					}).then((res) => {
						this.$Toast(res.msg);
						setTimeout(() => {
							this.$NavigateBack();
						}, 1600);
					}).catch((err) => {
						console.error('遇到错误:', err); // 打印错误信息
						let {
							code,
							msg
						} = this.$parseError(err); // 调用公共解析方法
						this.$Toast(msg);
						setTimeout(() => {
							if (code === 401) {
								this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
							}
						}, 1000);
					});
				}, 500, true, 'submit');
			}
		}
	}
</script>

<style>
	.fixed-bottom {
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx !important;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
		z-index: 9999;
		transition: background-color 0.2s ease;
	}

	.fixed-bottom:active {
		background-color: #11b051 !important;
		/* 点击时背景颜色变化 */
	}

	.slanted-rectangle {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		bottom: -20rpx;
		padding-bottom: 30rpx !important;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
		z-index: 2;
	}

	.slanted-rectangle::before {
		content: '';
		position: absolute;
		top: -25rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	.agreement {
		color: #14cc60;
		cursor: pointer;
	}

	.checkbox-box ::v-deep .uni-checkbox-input {}

	.checkbox-box ::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: $uni-color-primary;
		color: #FFFFFF !important;
		background-color: $uni-color-primary;
	}
</style>